<template>
    <div class="exam-container">
        <el-row :gutter="10">
    <el-col :span="data.num">    
        <div class="minibox bg_one">
          <div class="bg_one_top">
            <count-to
              :startVal="0"
              :endVal="43242"
              :autoPlay="true"
              :duration="2000"
            ></count-to
            >，人在线
          </div>
          <div>
            <count-to
              :startVal="0"
              :endVal="5346565"
              :autoPlay="true"
              :duration="2000"
            ></count-to
            >，用户数
          </div>
        </div></el-col>
    <el-col :span="data.num"><div class="minibox bg_two">
          <div class="bg_one_top">
            <count-to
              :startVal="0"
              :endVal="43242"
              :autoPlay="true"
              :duration="2000"
            ></count-to
            >，人在线
          </div>
          <div>
            <count-to
              :startVal="0"
              :endVal="5346565"
              :autoPlay="true"
              :duration="2000"
            ></count-to
            >，用户数
          </div>
        </div></el-col>
    <el-col :span="data.num"><div class="minibox bg_their">
          <div class="bg_one_top">
            <count-to
              :startVal="0"
              :endVal="43242"
              :autoPlay="true"
              :duration="2000"
            ></count-to
            >，人在线
          </div>
          <div>
            <count-to
              :startVal="0"
              :endVal="5346565"
              :autoPlay="true"
              :duration="2000"
            ></count-to
            >，用户数
          </div>
        </div></el-col>
    <el-col :span="data.num"><div class="minibox bg_four">
          <div class="bg_one_top">
            <count-to
              :startVal="0"
              :endVal="43242"
              :autoPlay="true"
              :duration="2000"
            ></count-to
            >，人在线
          </div>
          <div>
            <count-to
              :startVal="0"
              :endVal="5346565"
              :autoPlay="true"
              :duration="2000"
            ></count-to
            >，用户数
          </div>
        </div></el-col>
  </el-row>
<el-input v-model="age.nums"></el-input>
<el-button @click="btnclick">按我</el-button>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, toRefs, watchEffect } from "vue";
import {getStatistics,getLimitRepeatUserTop,getLIMITREPEATORGTOP} from '../../api/practice'
 let data=reactive({
    num:12,
    age:{
        nums:2
    },
    begin:'',
    end:'',
    data_one:{
        data:[]
    },
    data_two:{
        data:[]
    },
    data_their:{
        data:[]
    },
 })


 
let myname=ref<any>('花花环境')
const timer = ref(false);

const btnclick=()=>{
myname.value='asjkkj'
}

const bindData=()=>{
    // Promise.all([getStatistics({type:1}),
    // getLimitRepeatUserTop({type:3,beginTime:data.begin,endTime:data.end}),
    // getLIMITREPEATORGTOP({type:3,beginTime:data.begin,endTime:data.end})]).then((res:any)=>{
    //     console.log(res,"HJJKHJKHJHJLHJKL");
        
    // })
    getStatistics({type:1}).then((res:any)=>{
        console.log(151545454);
        
    })
}


 
 // 视口宽度
 const vieWidth:any = ref(
   document.documentElement.clientWidth || document.body.clientWidth
 );

 onMounted(()=>{
        bindData();
 })
 


    const {age}=toRefs(data)
 
 
 watchEffect( (vieWidth.value = () => {
    // 为了避免频繁触发导致页面卡顿，使用定时器
    if (!timer.value) {
      vieWidth.value = document.body.clientWidth;
      console.log();
      
      timer.value = true;
      setTimeout(function () {
        timer.value = false;
        if(vieWidth.value>1200){
            data.num=6;
        }else if(vieWidth.value<1200&&vieWidth.value>992){
            data.num=12;
        }else if(vieWidth.value<992){
            data.num=24;
        }
      }, 100);
    }
  })
 )
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
  
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
    margin-top: 5px;
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}




.top {
  width: 100%;
  display: flex;
  /* flex-wrap: wrap; */
}

.minibox {
  color: #fff;
  font-size: 20px;
  flex: 1;
  margin-left: 0px;
  background: red;
  height: 120px;
  margin-top: 5px;
  text-align: center;
  border-radius: 4px;
  line-height: 60px;
}

.bg_one {
  background-color: rgb(121, 187, 255);
}

.bg_two {
  background-color: rgb(230, 162, 60);
}

.bg_their {
  background-color: rgb(245, 108, 108);
}

.bg_four {
  background-color: rgb(103, 194, 58);
}

.bg_one_top {
  border-bottom: 1px solid #eee;
  margin-left: 5%;
  float: left;
  width: 90%;
  height: 50%;
  text-align: center;
}

</style>